<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions" >
    
    <f:metadata>
        <f:event type="preRenderView" listener="#{catalogoBean.cargarCatalogo}" />
    </f:metadata>

    <ui:define name="head">

        <h:outputStylesheet library="css" name="catalogo.css"/>
        <h:outputStylesheet library="css" name="principalPool.css" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"/>
        <h:outputStylesheet library="css" name="jquery.countdown.css" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"/>
        <h:outputStylesheet library="css" name="js-image-slider.css" rendered="#{(aplicacionBean.parametro.muestraBannerEnCatalogo == 'S') and (usuarioSessionBean.estaRegistrado)}"/>

    </ui:define>

    <ui:define name ="panelCentral" >

        <h:form prependId="false">
            <div class="contPool">  
            <ui:include src="../pool/bannerPool.xhtml" />   
            </div>
        </h:form>

        <!-- banner catálogo -->
        <h:form id="bannerCatalogo" rendered="#{(aplicacionBean.parametro.muestraBannerEnCatalogo == 'S') and (usuarioSessionBean.estaRegistrado)}" >
            <ui:include src="banner.xhtml" />
        </h:form> 
        
        <!--<h:form id="bannerTab">
            <ui:include src="bannerTab.xhtml" />
        </h:form> 
         -->  
    
        <h:form id="formulario" prependId="false">      
            
            <div style="width:980px; height:500px; float:left; position: relative;">
                
               <ui:include src="../inventario/filtrosAdicionales.xhtml" /> 
            </div>
            
            <div style="width:100%; text-align:center; margin-top:30px; "> <!-- Contenido responsive - cambiando el % de width -->                        
                
                <ul class="k-effect circle" value="#{catalogoBean.tipoProducto}"  >                
                    <ui:repeat value="#{catalogoBean.tiposProductos}" var="t">                     
                        <li class="ui-grid-col-44" >
                            <p:commandLink action="#{catalogoBean.verProductosFromCatalogoHome(t)}" process="@this" >
                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/#{t.nombreImagen}" />
                                <span class="mask"></span>
                                <div class="descTipo"><h:outputText value="#{t.descrp}" /></div>
                            </p:commandLink> 
                        </li>
                    </ui:repeat>        
                </ul>
                
            </div>

        </h:form>
        
    </ui:define>

</ui:composition>
